<template>
  <!-- 清空表单 ref和prop 和reset Fields搭配使用 -->
  <el-dialog :title="title" :visible.sync="visible" width="30%" :before-close="handleClose">
    <el-form
      status-icon
      ref="formData"
      :rules="rules"
      :model="formData"
      label-width="80px"
      label-position="right"
      style="width:400px"
    >
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">禁止</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number
          v-model="formData.sort"
          :min="1"
          :max="100000"
          label="排序"
          style="width:320px"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="formData.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="SubmitForm('formData')" size="mini">确定</el-button>
        <el-button size="mini" @click="handleClose()">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import category from "@/api/category";

export default {
  props: {
    visible: {
      //弹出框
      type: Boolean,
      default: false
    },
    title: {
      //标题
      type: String,
      default: ""
    },
    // 表单数据
    formData: {
      type: Object,
      default: {}
    },
    remoteClose: Function
  },
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
        sort: [{ required: true, message: "请选择排序号", trigger: "blur" }],
        remark: []
      }
    };
  },
  methods: {
    dialogVisible() {},
    // 关闭窗口
    handleClose(val) {
      // 对该表单项进行重置，将其值重置为初始值并移除校验结果
      this.$refs["formData"].resetFields();
      //调用父组件关闭窗口
      this.remoteClose(val);
      // 或者
      // this.$emit('remoteClose')
    },
    // 确定提交表单
    SubmitForm(formName) {
      console.log(this.formData.id, "id");
      this.$refs[formName].validate(valid => {
        //   console.log(valid)// false或true
        if (valid) {
          // 新增
          this.submitData(1);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async submitData(val) {
      let responst = null;
      // 带id的就是修改  因为修改之前根据id查询数据的
      if (this.formData.id) {
        responst = await category.update(this.formData);
      } else {
        //方式1 .then的形式
        //   category.add(this.formData).then(res => {
        //       console.log(res,'submitData')
        //   });
        // 方式2 async  await
        responst = await category.add(this.formData);
      }

      if (responst.code == 20000) {
        this.$message({
          message: "保存成功",
          type: "success"
        });
        // 关闭窗口
        this.handleClose(val);
      } else {
        this.$message({
          message: "很遗憾，保存失败",
          type: "danger"
        });
      }
    }
  }
};
</script>